<template>
  <div class="modal-overlay" @click.self="$emit('close')">
    <div class="modal-content">
      <div class="modal-header">
        <h3>{{ isEditMode ? '编辑勤务场景' : '添加勤务场景' }}</h3>
        <button class="close-btn" @click="$emit('close')">×</button>
      </div>
      <div class="modal-body">
        <form @submit.prevent="submitForm">
          <div class="form-group">
            <label for="scene-id">场景编号:</label>
            <input id="scene-id" type="text" v-model="formData.sceneNum" required :disabled="isEditMode">
          </div>
          <div class="form-group">
            <label for="scene-name">场景名称:</label>
            <input id="scene-name" type="text" v-model="formData.sceneName" required>
          </div>
          <div class="form-group">
            <label for="scene-description">描述:</label>
            <textarea id="scene-description" v-model="formData.description" rows="3"></textarea>
          </div>
          <div class="form-group">
            <label for="scene-type">场景类型:</label>
            <select id="scene-type" v-model="formData.sceneType">
              <option>日常巡逻</option>
              <option>大型活动安保</option>
              <option>应急处突</option>
            </select>
          </div>
          <div class="form-row">
            <div class="form-group">
              <label for="start-date">有效时间 - 开始:</label>
              <input id="start-date" type="date" v-model="formData.beginning">
            </div>
            <div class="form-group">
              <label for="end-date">有效时间 - 结束:</label>
              <input id="end-date" type="date" v-model="formData.ending">
            </div>
          </div>
          <div class="form-group">
            <label for="applicable-area">适用区域:</label>
            <input id="applicable-area" type="text" v-model="formData.applicableArea">
          </div>
          <div class="form-group">
            <label for="police-demand">关联警力需求:</label>
            <input id="police-demand" type="text" v-model="formData.officeRequest" placeholder="例如: 巡逻大队2人, 交警3人">
          </div>
        </form>
      </div>
      <div class="modal-footer">
        <button class="btn btn-cancel" @click="$emit('close')">取消</button>
        <button class="btn btn-confirm" @click="submitForm">{{ isEditMode ? '更新' : '提交' }}</button>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { reactive, watch } from 'vue';
import api from '@/utils/axios';

const API_BASE_URL = 'http://localhost:8080/api/auth';

const props = defineProps<{
  isEditMode: boolean,
  initialData?: any
}>();

const emit = defineEmits(['close', 'save']);

const getDefaultFormData = () => ({
  sceneNum: '',
  sceneName: '',
  description: '',
  sceneType: '日常巡逻',
  beginning: '',
  ending: '',
  applicableArea: '',
  officeRequest: ''
});

const formData = reactive(getDefaultFormData());

watch(() => props.initialData, (newData) => {
  Object.assign(formData, { ...getDefaultFormData(), ...newData });
}, { immediate: true });

const submitForm = async () => {
  if (!formData.sceneNum || !formData.sceneName) {
    alert('场景编号和场景名称不能为空！');
    return;
  }
  try {
    if (props.isEditMode) {
      const response = await api.put(`${API_BASE_URL}/updateScene/${props.initialData.sceneId}`, formData);
      emit('save', response.data);
    } else {
      const response = await api.post(`${API_BASE_URL}/addScene`, formData);
      emit('save', response.data);
    }
    emit('close');
  } catch (error) {
    console.error('提交表单出错:', error);
    alert('提交表单出错，请稍后重试！');
  }
};
</script>

<style scoped>
@import "@/assets/styles/views/admin/SceneFormModal.css";
</style>
